<template>
    <div class="box">
        <div class="scroll-wrapper" ref="scroll">
            <div class="scroll-content">
                <div class="scroll-item" v-for="item in ranklist" 
                    :key ="item.id"
                    @click ="clickHandler(item)"
                >
                    <div class="left">
                        <img v-lazy="item.picUrl">
                    </div>
                    <div class="right">
                        <p v-for="(va,index) in item.songList" :key="index">
                            <span>{{ index + 1 }}</span><span class="sp1">{{ va.songname }} - {{ va.singername }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import BetterScroll from "better-scroll";
import { getTopList,getMusicList } from "@/api/rank.js";
export default {
    data() {
        return {
        ranklist: [],
        };
    },
    mounted() {
        getTopList().then((res) => {
            this.ranklist = res.data.topList;
            this.$nextTick(() => {
                new BetterScroll(this.$refs.scroll, {
                pullUpLoad: true,
                click: true,
                });
            });
        });
    },
    computed:{
        ...mapState(['alertlist'])
    },
    methods:{
        ...mapMutations(['getalertlist', 'setPublicAlertFlag', 'setimg']),
        async  clickHandler(topid){
            this.changeAlert(true);
            let res = await getMusicList(topid);
            this.getalertlist(res.songlist);
            console.log(res)
        },
        imgurl(url){
            let str = 'y.gtimg.cn';
            let arr = url.split('/')
            let arr1 = arr.splice(2, 1, str)
            return arr.join('/')
        },
        async clickHandler(item){
            this.setPublicAlertFlag(true);
            let res = await getMusicList(item.id);
            let arr = []
            res.songlist.forEach(val => arr.push(val.data))
            this.getalertlist(arr)    
            this.setimg(this.imgurl(res.topinfo.pic_album))
        }
    },
}
</script>
<style lang='scss' scoped>
.box {
    width: 100%;
    height: 100%;
    background: #222;
}
.scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.scroll-content {
    width: 100%;
}
.scroll-item {
    width: 100%;
    display: flex;
    padding: 20px 20px 0 20px;
    .left {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        img {
            width: 100%;
        }
    }
    .right {
        flex: 1;
        color: hsla(0, 0%, 100%, 0.3);
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0 10px 20px;
        background: #333;
        height: 100px;
        p {
            width: 188px;
            line-height: 26px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>